<template>
  <!--  卡片组件-->
  <el-card>
    <!--    面包屑组件-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <!--      配置点击后跳转router-->
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>馆藏类别管理</el-breadcrumb-item>
      <el-breadcrumb-item>类别信息管理</el-breadcrumb-item>
    </el-breadcrumb>


    <el-row :gutter="10">
      <el-col :span="6">
        <el-input v-model="catename" placeholder="请输入类别名称 "></el-input>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" size="small" @click="openAddDialog" icon="el-icon-plus">添加</el-button>
      </el-col>
    </el-row>


    <!--    表格组件-->
    <el-table
      :data="tableData"
      border
      style="width: 100%;margin-top: 10px">
      <el-table-column
        prop="catename"
        label="类别名称">
      </el-table-column>
      <el-table-column
        prop="createtime"
        label="创建时间">
      </el-table-column>
      <el-table-column
        prop="modefytime"
        label="修改时间">
      </el-table-column>
      <el-table-column
        label="操作">
        <template v-slot="scope">
          <el-button type="warning" size="small" @click="openEditDialog(scope.row) " icon="el-icon-edit">修改</el-button>
          <el-button type="danger" size="small" @click="remove(scope.row)" icon="el-icon-delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
<!--    分页组件-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pager.page"
      :page-sizes="[10, 15, 20, 25]"
      :page-size="pager.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pager.total">
    </el-pagination>
<!--添加对话框-->
    <el-dialog title="添加类别" :visible.sync="addDialogFlag">
      <el-form :model="categoryForm" :roles="roles" ref="category">
        <el-form-item label="类别名称" prop="catename">
          <el-input v-model="categoryForm.catename" placeholder="请输入类别名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFlag = false">关 闭</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </div>
    </el-dialog>
<!--    修改对话框 -->
    <el-dialog title="修改类别" :visible.sync="editDialogFlag">
      <el-form :model="categoryForm" :roles="roles" ref="category">
        <el-form-item label="类别名称" prop="catename">
          <el-input v-model="categoryForm.catename" placeholder="请输入类别名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogFlag = false">关 闭</el-button>
        <el-button type="primary" @click="update">保 存</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>
<script lang="js">
export default {
  data() {
    return {
      tableData: [],
      catename: '',
      addDialogFlag: false,
      editDialogFlag:false,
      categoryForm: {},
      roles:{},
      pager:{
        page:1,
        size:5,
        total:0,
      }
    }
  },
  methods: {
    handleSizeChange(val){
      this.pager.size=val;
      this.search();
    },
    handleCurrentChange(val){
      this.pager.page=val;
      this.search();
    },
    // 页面加载时使用mounted钩子方法，发起请求加载数据
    search() {
      this.$http.get('http://localhost:80/category/list',{
        params:{
          page:this.pager.page,
          size:this.pager.size
        }
      })
          .then(res => {
            this.tableData = res.data.data.data
            this.pager.total=res.data.data.total;
          }).catch(err => {
        this.$message.error("网络异常")
      })
    },
    remove(row) {
      this.$http.delete("http://localhost:80/category/remove?cateid=" + row.cateid).then(res => {
        if (res.data.code === 200) {
          this.$message({
            message:res.data.message,
            type:"success"
          })
        }
      }).catch(err => {
        this.$message.error("网络异常")
      })
    },
    save() {
      this.$refs['category'].validate(valid=>{
        if(valid){
          this.$http.post("http://localhost/category/save", this.categoryForm).then(res => {
            if (res.data.code === 200) {
              this.$message({
                message:res.data.message,
                type:"success"
              })
              this.search();
              this.openAddDialog();
            }
          }).catch(err => {
            this.$message.error("网络异常"+err)
          })
        }
      })
    },
    update(){
      this.$http.put("http://localhost/category/update",this.categoryForm).then(res=>{
        if(res.data.code === 200){
          this.$message({
            message:res.data.message,
            type:"success"
          })
          this.search();
          this.editDialogFlag=!this.editDialogFlag;
        }
      })
    },

    openAddDialog() {
      this.addDialogFlag = !this.addDialogFlag;
    },
    //  修改对话框  对话框内容赋值
    openEditDialog(row) {
      this.editDialogFlag = !this.editDialogFlag;
      this.categoryForm=row;
    }
  },
  mounted() {
    this.search()
  }
}
</script>
<style scoped>
.el-breadcrumb {
  margin: 5px;
}
</style>
